<script setup lang="ts">
const input = ref("")
const placeholder = ref("搜索")
const suggestShow = ref(false)

function handleSearch() {
  // 确定搜索内容
  if (!input.value) {
    input.value = placeholder.value
  }
  // 是否跳转到搜索页面
}
</script>
<template>
  <div
    :class="{
      'bili-search-wrapper': true,
      'bili-search-wrapper-exposed': suggestShow,
    }"
  >
    <div class="bili-search-input">
      <input
        v-model="input"
        :placeholder="placeholder"
        @focus="suggestShow = true"
        @blur="suggestShow = false"
      />
      <div class="icon-wrapper" @click="handleSearch">
        <i class="iconfont icon-search"></i>
      </div>
    </div>
    <div v-show="suggestShow" class="bili-search-suggestions">搜索建议</div>
  </div>
</template>
<style lang="less" scoped>
/**
 * // todo:利用了溢出 
 * 很多时候溢出都是 bug，但是这里利用了溢出，搞清楚这里面的原理吧还是
 */
@radius: 4px;
@exposedBorderColor: red;

.bili-search-wrapper-exposed {
  .bili-search-input {
    border: 1px solid @exposedBorderColor !important;
    border-bottom: 1px solid transparent !important;
    border-bottom-left-radius: unset !important;
    border-bottom-right-radius: unset !important;
    input {
      background-color: #fff !important;
    }
  }
}
.bili-search-wrapper {
  flex: 1;
  height: 40px;
  margin: 0 5rem;
  border-radius: @radius;

  .bili-search-input {
    height: inherit;
    padding: 6px;
    border: 1px solid transparent;
    background-color: #dcdcdc;
    box-sizing: border-box;
    border-radius: @radius;
    opacity: 0.8;
    display: flex;
    align-items: center;
    &:hover {
      opacity: 1;
    }
    input {
      height: 100%;
      outline: unset;
      border: none;
      flex: 1;
      border-radius: @radius;
      background-color: transparent;
    }
    .icon-wrapper {
      @iconSize: 30px;
      height: @iconSize;
      width: @iconSize;
      margin-left: 8px;
      border-radius: @radius;
      display: grid;
      place-items: center;
      &:hover {
        background-color: #9e9b9b;
      }
      &:active {
        background-color: #c0bbbb;
      }
    }
  }

  .bili-search-suggestions {
    width: 100%;
    height: 300px;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: -1px;

    border: 1px solid @exposedBorderColor;
    border-top: none;

    border-bottom-left-radius: @radius;
    border-bottom-right-radius: @radius;
  }
}
</style>
